3、使用伪元素方法在元素内容之后加一个空内容，转成表格元素，设置左右两侧不能有浮动元素：
ul::after{
content:””;
display:table;
clear:both;
}
注意：父元素设置有高度时，不用清浮动。
引入rerest.css文件样式
.fl{float:left;}
.fr{float:right;}
.cl{clear:both;}
.clearfix{
content:"";
display:table;
clear:both
}
修改html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css</title>
<link rel="stylesheet" href="rerest.css">
<style type="text/css">
ul{width:420px;border:4px solid red;margin:50px auto; }
.a,.b,.c{width:100px; height:100px; color:white; text-align:center; line-height:100px; font-size:30px; }
.a{background:green;}
.b{background:blue;}
.c{background:orange;}
</style>
</head>
<body>
<ul class="clearfix">
<li class="a fl">1</li>
<li class="b fl">2</li>
<li class="c fr">3</li>
</ul>
</body>
</html>
返回值：